import React, { Component } from "react";

export default class StateThis extends Component {
  //声明状态
  state = {
    count: 100,
  };

  //构造方法中的 this 指向『实例对象』
  constructor(){
    super();
    //获得原型对象中的 add 函数
    //3. 为实例对象新增一个属性, 值为原型对象中的 add bind 之后返回的函数
    // let fn = this.add.bind(this);
    // //赋值
    // this.add = fn;
    this.add = this.add.bind(this);
  }

  //1. 将更新代码封装到类的方法中
  add() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  //render 方法中的 this 指向谁? 实例对象
  render() {
    return (
      <div>
        <h2>{this.state.count}</h2>
        {/* 2. 使用 this.add 设置事件回调 */}
        <button onClick={this.add}>新增</button>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count - 1,
            });
          }}
        >
          减少
        </button>
      </div>
    );
  }
}
